<template>
	<view class="topBar">
		<scroll-view class="topBarList" scroll-x="true">
			<text v-for="item in barList" class="newsType" :class="item.id==activeId?'active':''" :key="item.id"
				@click="clickNewsType(item.id)">{{item.classname}}</text>
		</scroll-view>
	</view>
	<view class="newBox">
		<view v-if="newsList.length>0" v-for="item in newsList" :key="item.id" class="news" @click="toNewsDetail(item)">
		<newsListItem :listitem="item"></newsListItem>
			<!-- <view class="pic">
				<image mode="aspectFill" :src="item.picurl"></image>
			</view>
			<view class="content">
				<view class="title">{{item.title}}</view>
				<view class="info">
					<view class="publish">{{item.author}}</view>
					<view class="viewCount">{{item.hits}}浏览</view>
				</view>
			</view> -->
		</view>
		<image mode="aspectFill" class="noDate" v-else src="../../static/images/nodata.png"></image>
	</view>

	<view class="loading">
		<view v-if="loadingVal==1">加载中......</view>
		<view v-if="loadingVal==2& newsList.length>0">我是有底线的</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
	} from '@dcloudio/uni-app'
	const barList = ref([])
	const newsList = ref([])
	const activeId = ref(50)
	const currentPage = ref(1)
	const loadingVal = ref(0) //0默认 1加载中 2加载完成到底
	const getNewsType = () => {
		uni.request({
			url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
			success(res) {
				barList.value = res.data
			}
		})
	};
	const getNews = () => {
		uni.request({
			url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
			data: {
				cid: activeId.value,
				page: currentPage.value
			},
			success(res) {
				if (res.data.length == 0) {
					loadingVal.value = 2
					return
				}
				newsList.value.push(...res.data)
			}
		})
	};
	const clickNewsType = (id) => {
		activeId.value = id
		currentPage.value = 1
		newsList.value = []
		loadingVal.value = 0
		getNews()
	}
	const toNewsDetail = (item) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${item.id}&cid=${item.cid}`
		})
	}
	onLoad(() => {
		getNewsType();
		getNews()
	})
	onReachBottom(() => {
		if (loadingVal.value == 2) {
			return
		}
		currentPage.value++
		loadingVal.value = 1
		getNews()
	})
</script>

<style lang="scss" scoped>
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.topBarList {
		position: fixed;
		z-index: 1;
		height: 80rpx;
		padding: 20rpx;
		background-color: #F7F8FA;
		white-space: nowrap;


		.newsType {
			display: inline-block;
			width: 12%;
			line-height: 80rpx;
			font-size: 35rpx;
			font-weight: 500;
			margin-left: 50rpx;
		}

		:first-child {
			margin-left: 0rpx;
		}

		.active {
			color: #31C37C;
		}
	}

	.newBox {
		padding-top: 80rpx;

		.noDate {
			width: 750rpx;

		}

	}

	.loading {
		text-align: center;

		view {
			color: #999;
			line-height: 50rpx;
		}
	}
</style>